<template>
  <div class="bg-slate-400 mr-2 ml-2 mt-2 mb-2 border border-black shadow-lg rounded-2xl">
    <div class="p-2">
      <van-row>
        <van-col span="6">
          <div class="flex items-center justify-center h-full p-1">
            <img class="w-full h-auto object-cover aspect-square rounded-xl"
              :src="homeSettingCardComponentStore.iconUrl" />
          </div>
        </van-col>
        <van-col span="13" offset="1" class="text-left">
          <p class="text-base relative mt-1 font-black text-slate-700 mb-1"
            v-text="homeSettingCardComponentStore.usr" />
          <p class="text-sm relative mt-1 text-slate-600 mb-1" v-text="homeSettingCardComponentStore.phone" />
          <p class="relative mt-1 font-sans text-slate-500 text-xs mb-1"
            v-text="homeSettingCardComponentStore.adress" />
          <p class="relative mt-1 mb-0 font-sans text-xs text-slate-500"
            v-text="homeSettingCardComponentStore.worker" />
        </van-col>
        <van-col span="3" offset="1">
          <div class="flex items-center justify-center h-full p-0">
            <van-icon name="arrow" size="30" class="text-slate-600"
              @click="homeSettingCardComponentStore.rightArrow = true" />
            <van-overlay :show="homeSettingCardComponentStore.rightArrow"
              @click="homeSettingCardComponentStore.rightArrow = false">
              <div class="flex items-center justify-center h-full">
                <div class="h-11 w-11 bg-white">11</div>
              </div>
            </van-overlay>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang="ts">
const homeSettingCardComponentStore = useHomeSettingCardComponentStore();
</script>

<style scoped></style>
